<template>
	<view class="news-content">
		<!-- 自定义导航栏 -->
		<news-nav-bar :tabBars="tabBars" :tabIndexs="tabIndex" @change-tab="changeTab"></news-nav-bar>

		<view class="uni-tab-bar tab">
			<swiper :current="tabIndex" class="swiper-box" :style="{ height: swiperHeight + 'px' }" @change="tabChange">
				<!-- 关注 -->
				<swiper-item>
					<scroll-view scroll-y="true" class="list" @scrolltolower="loadmore">
						<!-- 列表 -->
						<block v-for="(item, index) in guanzhu.list" :key="index"><common-list :index="index" :item="item"></common-list></block>
						<!-- 上拉刷新 -->
						<load-more :loadtext="guanzhu.loadtext"></load-more>
					</scroll-view>
				</swiper-item>
				<!-- 话题 -->
				<swiper-item>
					<scroll-view scroll-y="true" class="list" @scrolltolower="loadmore">
						<!-- 搜索框 -->
						<view class="search-input">
							<input type="text" v-model="input" placeholder="搜索内容" placeholder-class="topic-search uflex-j_c icon iconfont icon-sousuo" class="uni-input" />
						</view>
						<!-- 轮播图 -->
						<swiper
							:indicator-dots="true"
							:autoplay="true"
							:interval="2000"
							:duration="500"
							class="topic-swiper"
							:circular="true"
							indicator-active-color="#fff"
							indicator-color="rgba(0, 0, 0, .5)"
						>
							<swiper-item v-for="(item, index) in topic.swiper" :key="index"><image :src="item.src" mode="widthFix" lazy-load></image></swiper-item>
						</swiper>
						<!-- 热门分类 -->
						<topic-nav :nav="topic.nav"></topic-nav>
						<!-- 最近更新 -->
						<view class="topic-new">
							<view class="title">最近更新</view>
							<block v-for="(item, index) in topic.list" :key="index"><topic-list :item="item" :index="index"></topic-list></block>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import newsNavBar from '../../components/news/news-nav-bar.vue';
import commonList from '../../components/common/common-list.vue';
import loadMore from '../../components/common/load-more.vue';
import topicNav from '../../components/news/topic-nav.vue';
import topicList from '../../components/news/topic-list.vue';
export default {
	data() {
		return {
			tabIndex: 0,
			swiperHeight: 0,
			input: '',
			tabBars: [
				{ name: '关注', id: 'guanzhu' },
				{
					name: '话题',
					id: 'topic'
				}
			],
			guanzhu: {
				loadtext: '上拉加载更多',
				list: [
					// 图文
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '吸喷',
						sex: 0, // 0 男 1 女
						age: 25,
						isguangzhu: false,
						title: '我是标题我是标题我是标题我是标题',
						titlepic: '../../static/demo/datapic/13.jpg',
						video: false,
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 40,
						goodnum: 30
					},
					// 文
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '吸喷',
						sex: 0, // 0 男 1 女
						age: 25,
						isguangzhu: false,
						title: '我是标题我是标题我是标题我是标题',
						titlepic: '',
						video: false,
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 40,
						goodnum: 30
					},
					//视频
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '吸喷',
						sex: 0, // 0 男 1 女
						age: 25,
						isguangzhu: false,
						title: '我是标题我是标题我是标题我是标题',
						titlepic: '../../static/demo/datapic/13.jpg',
						video: {
							looknum: '20w',
							long: '2:47'
						},
						path: '深圳 龙岗',
						share: false,
						sharenum: 20,
						commentnum: 40,
						goodnum: 30
					},
					// 分享
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '吸喷',
						sex: 1, // 0 男 1 女
						age: 25,
						isguangzhu: false,
						title: '我是标题我是标题我是标题我是标题',
						titlepic: '',
						video: false,
						share: {
							title: '我是标题我是标题我是标题我是标题',
							titlepic: '../../static/demo/datapic/13.jpg'
						},
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 40,
						goodnum: 30
					}
				]
			},
			topic: {
				swiper: [{ src: '../../static/demo/banner1.jpg' }, { src: '../../static/demo/banner2.jpg' }],
				nav: [{ name: '最新' }, { name: '游戏' }, { name: '打卡' }, { name: '情感' }, { name: '故事' }, { name: '喜爱' }],
				list: [
					{
						titlepic: '../../static/demo/topicpic/13.jpeg',
						title: '#话题名称#',
						desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
						totalnum: 30,
						todaynum: 10
					},
					{
						titlepic: '../../static/demo/topicpic/13.jpeg',
						title: '#话题名称#',
						desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
						totalnum: 30,
						todaynum: 10
					},
					{
						titlepic: '../../static/demo/topicpic/13.jpeg',
						title: '#话题名称#',
						desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
						totalnum: 30,
						todaynum: 10
					},
					{
						titlepic: '../../static/demo/topicpic/13.jpeg',
						title: '#话题名称#',
						desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
						totalnum: 30,
						todaynum: 10
					},
					{
						titlepic: '../../static/demo/topicpic/13.jpeg',
						title: '#话题名称#',
						desc: '我是话题描述我是话题描述我是话题描述我是话题描述',
						totalnum: 30,
						todaynum: 10
					}
				]
			}
		};
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.swiperHeight = res.screenHeight - uni.upx2px(288);
			}
		});
	},
	methods: {
		changeTab(index) {
			this.tabIndex = index;
		},
		// tap点击事件
		tabtap(index) {
			this.tabIndex = index;
		},
		// 滑动事件
		tabChange(ev) {
			this.tabIndex = ev.detail.current;
		},
		loadmore() {
			if (this.tabIndex === 0) {
				this.guanzhu.loadtext = '上拉加载更多';
				if (this.guanzhu.loadtext != '上拉加载更多') {
					return;
				}
				this.guanzhu.loadtext = '加载中...';
				uni.showLoading({
					title: '加载中...',
					mask: true,
					success: () => {
						let obj = {
							userpic: '../../static/demo/userpic/12.jpg',
							username: '吸喷',
							sex: 0, // 0 男 1 女
							age: 25,
							isguangzhu: false,
							title: '我是标题我是标题我是标题我是标题',
							titlepic: '../../static/demo/datapic/13.jpg',
							video: {
								looknum: '20w',
								long: '2:47'
							},
							path: '深圳 龙岗',
							share: false,
							sharenum: 20,
							commentnum: 40,
							goodnum: 30
						};
						setTimeout(() => {
							this.guanzhu.list.push(obj);
							uni.hideLoading();
							this.guanzhu.loadtext = '上拉加载更多';
						}, 1000);
					}
				});
			}
		}
	},
	components: {
		commonList,
		newsNavBar,
		loadMore,
		topicNav,
		topicList
	}
};
</script>

<style lang="scss" scoped>
.news-content {
	width: 100%;
	.search-input {
		padding: 20upx;
		> input {
			background-color: #f4f4f4;
			border-radius: 10upx;
		}
		.topic-search {
			font-size: 27upx;
		}
	}
	.topic-swiper {
		padding: 20upx;
		border-radius: 20upx;
		image {
			width: 100%;
			border-radius: 20upx;
		}
	}
	.topic-new {
		padding: 20upx;
		> .title {
			padding-bottom: 10upx;
		}
	}
}
</style>
